<template>
  <div class="searchSuggest">
    <!-- <p>搜索提示</p> -->
    <ul>
      <!-- <li v-for="item in searcharr.songs" :key="item.id" @click="searchItem(item.id)">
        {{ item.name }}
      </li>
      <li v-for="item in searcharr.artists" :key="item.id" @click="searchItem(item.id)">
        {{ item.name }}
      </li>
      <li v-for="item in searcharr.albums" :key="item.id" @click="searchItem(item.id)">
        {{ item.name }}
      </li>
      <li v-for="item in searcharr.playlists" :key="item.id" @click="searchItem(item.id)">
        {{ item.name }}item.id
      </li> -->
      <li v-for="item in suggestList" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "SearchSuggest",
  props: ["keywords"],
  created() {
    this.getSuggest(this.keywords);
  },
  data() {
    return {
      suggestList: [],
      isSuccess:true
    };
  },
  watch: {
    keywords(Newvalue) {
      this.getSuggest(Newvalue);
    },
  },
  methods: {
    // searchItem(e){
    //     console.log(e)
    // }
    getSuggest(keyword) {
      if(!this.isSuccess) return;
      this.isSuccess = false;
      this.$http
        .get("/search/suggest", {
          params: {
            keywords: keyword,
          },
        })
        .then(d => {
          let order = d.data.result.order;
          // console.log(order);
          let result = [];
          if(order){
            for(let i = 0; i<order.length;i++){
              result = result.concat(d.data.result[order[i]]);
            }
          }
          this.suggestList = result;
          this.isSuccess = true;
        });
    },
  },
};
</script>

<style lang="less" scoped>
.searchSuggest {
  li {
    height: 50px;
    line-height: 53px;
    border-bottom: 1px solid #d3d3d3;
    padding: 0 45px;
    font-size: 16px;
    position: relative;
    &::after {
      content: "";
      display: block;
      height: 30px;
      width: 30px;
      position: absolute;
      background: url("../assets/search.png") no-repeat;
      background-size: 20px 20px;
      left: 15px;
      top: 16px;
    }
  }
}
</style>